<template>
	<view class="content ">
		<view class="indexC" :class="showLoading?'hidePage':''">
			<!-- 用户信息 -->
			<view class="msg-info flex-between boxS">
				<view class="msg-i">
					<view class="msg-name">
						<text class="font30">{{userInfo.user_name}}</text>
						<text class="font26">{{userInfo.position_name}}-{{userInfo.post_name}}</text>
					</view>
					<view class="msg-group">
						考勤组：{{showList.group?showList.group.name:'暂无'}}
					</view>
				</view>
				<view class="msg-btn font26" @click="dialogToggle('info')" hover-class="btns">
					上报
				</view>
			</view>
			<!-- 考勤状态 -->
			<view class="index-state font30 flex-left boxS">
				<image src="../../static/img/index_ico1.png" mode="widthFix"></image>
				<text>考勤状态：{{nowDate.day?nowDate.day.attendance_status_text:'暂无'}}</text>
			</view>
			<view class="index-cc boxS">
				<!-- 考勤提示 -->
				<view class="index-tips flex-between">
					<view class="tips-item">
						<view class="tips-time font24">
							上班时间：{{showList.work_punch?showList.work_punch.start_time:'--:--:--'}}
							<text class="tips-tar font20"
								v-if="showList.work_punch&&showList.work_punch.status==2">缺卡</text>
							<text class="tips-tar font20 co-yellow"
								v-if="showList.work_punch&&showList.work_punch.status==3">迟到</text>
							<text class="tips-tar font20 co-red"
								v-if="showList.work_punch&&showList.work_punch.status==4">早退</text>
						</view>
						<!-- 未打卡 -->
						<view class="tips-text font28" v-if="showList.work_punch&&showList.work_punch.status!=2">
							{{showList.work_punch.status_text}}
							{{showList.work_punch.status!=0?showList.work_punch.punch_time:''}}
						</view>
						<!-- 补卡申请 -->
						<view class="tips-btn font24" v-if="showList.work_punch&&showList.work_punch.status==2"
							@click="toSupplement()" hover-class="btns">
							补卡申请
						</view>
					</view>
					<view class="tips-item">
						<view class="tips-time font24">
							下班时间：{{showList.off_work_punch?showList.off_work_punch.emd_time:'--:--:--'}}
							<!-- 下班时间：{{showList.off_work_punch&&showList.off_work_punch.is_next_day==1?'次日':''}}{{showList.off_work_punch?showList.off_work_punch.emd_time:'--:--:--'}} -->
							<text class="tips-tar font20"
								v-if="showList.off_work_punch&&showList.off_work_punch.status==2">缺卡</text>
							<text class="tips-tar font20 co-yellow"
								v-if="showList.off_work_punch&&showList.off_work_punch.status==3">迟到</text>
							<text class="tips-tar font20 co-red"
								v-if="showList.off_work_punch&&showList.off_work_punch.status==4">早退</text>
						</view>
						<!-- 未打卡 -->
						<view class="tips-text font28"
							v-if="showList.off_work_punch&&showList.off_work_punch.status!=2">
							{{showList.off_work_punch.status_text}}
							{{showList.off_work_punch.status!=0?showList.off_work_punch.punch_time:''}}
						</view>
						<!-- 补卡申请 -->
						<view class="tips-btn font24" v-if="showList.off_work_punch&&showList.off_work_punch.status==2"
							@click="toSupplement()" hover-class="btns">
							补卡申请
						</view>
					</view>
				</view>

				<!-- 可打卡按钮 -->
				<view class="index-clock flex-center" v-if="attendStates.punch_status<=4 && attendStates.distance"
					@click="punchClock">
					<view class="clock-c">
						<view class="clock-tip font34">
							{{attendStates.punch_status==1?'上班打卡':''}}
							{{attendStates.punch_status==2?'迟到打卡':''}}
							{{attendStates.punch_status==3?'早退打卡':''}}
							{{attendStates.punch_status==4?'下班打卡':''}}
						</view>
						<view class="clock-time font28">
							{{clockTime}}
						</view>
					</view>
				</view>
				<view class="index-clock flex-center index-clock-other"
					v-else-if="attendStates.punch_status<=4 && !attendStates.distance">
					<view class="clock-c">
						<view class="clock-tip font28">
							未进入考勤范围
						</view>
						<view class="clock-time font28">
							{{clockTime}}
						</view>
					</view>
				</view>
				<!-- 不可打卡 -->
				<view class="index-clock flex-center index-clock-other" v-else>
					<view class="clock-c">
						<view class="clock-tip font34">
							{{attendStates.punch_status==5?'节假日休息':''}}
							{{attendStates.punch_status==6?'平日休息':''}}
							{{attendStates.punch_status==7?'外出打卡':''}}
						</view>
						<view class="clock-time font28">
							{{clockTime}}
						</view>
					</view>
				</view>

				<!-- 打卡提示 -->
				<view class="index-status font26">
					<!-- 在范围内 -->
					<view class="status-text flex-center" v-if="attendStates.distance">
						<image src="../../static/img/index_ico2.png" mode="widthFix"></image>
						<text>已进入考勤打卡定位范围：{{showList.group?showList.group.address:'暂无'}}</text>
					</view>
					<!-- 不在范围内 -->
					<view class="status-text flex-center" v-else>
						<image src="../../static/img/index_ico3.png" mode="widthFix"></image>
						<text>未进入考勤打卡定位范围：{{showList.group?showList.group.address:'暂无'}}</text>
					</view>
				</view>

				<!-- 刷新当前位置 -->
				<view class="index-refresh font26" @click="refreshBtn">
					刷新当前位置
				</view>
			</view>
		</view>
		<lzLoading :showloading='(showL== showLoading)'></lzLoading>

		<!-- 上报弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'info'" title="系统提示" content="是否上报当前考勤？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	import moment from 'moment'
	let sett = '';
	let setU = '';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				showLoading: true,
				userInfo: '', //用户信息
				clockTime: "--:--:--",
				nowTime: null,
				showList: "", //考勤组信息
				nowDate: '', //当天考勤数据

				showL: false,
				attendStates: '', //当前打卡的时间
				userInfo: uni.getStorageSync("USERINFO")
			}
		},
		onLoad() {
			this.timingUpdate()

		},
		onShow() {
			this.userInfo = uni.getStorageSync("USERINFO");
			this.nowTime = null;
			this.getAttendanceState();
			Promise.all([this.getAttGroup(), this.getAttendance()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 1000)
			})

			//获取当前时间
			sett = setInterval(() => {
				if (this.nowTime){
					this.nowTime = moment(this.nowTime).add(1, 's');
					this.clockTime = moment(this.nowTime).format("HH:mm:ss");
				}

			}, 1000)
		},

		onUnload() {
			clearInterval(sett)
			clearInterval(setU)
		},
		onHide() {
			clearInterval(sett)
			clearInterval(setU)
		},

		methods: {
			//获取考勤组
			getAttGroup() {
				return new Promise((resolve, reject) => {
					this.$api.getAttGroup({}, true, (res) => {
						console.log(res,201)
						if (res.work_punch.punch_time != '') {
							res.work_punch.punch_time = this.$util.formatTime(res.work_punch.punch_time, 'h:m')
						}
						if (res.off_work_punch.punch_time != '') {
							res.off_work_punch.punch_time = this.$util.formatTime(res.off_work_punch.punch_time, 'h:m')
						}
						this.showList = res
						resolve("success")
					})
				})
			},
			//获取当天考勤
			getAttendance() {
				return new Promise((resolve, reject) => {
					this.$api.getAttendance({
						day: this.$util.formatTime('now', 'Y-M-D')
					}, true, (res) => {
						this.nowDate = res
						resolve("success")
					})
				})
			},
			//获取考勤状态
			getAttendanceState() {
				let page=this;
				this.getAddress((loacl) => {
					this.$api.getAttendanceState({
						longitude: loacl.longitude,
						latitude: loacl.latitude
					}, true, (res) => {
						console.log("~~~~~~~~~~~~~~~~~~友情分割~~~~~~~~~~~~~~~~~~")
						console.log(res)
						page.attendStates = res
						if (!page.nowTime) {
							page.nowTime = res.punch_time
							// this.clockTime = moment(res.punch_time).format("HH:mm:ss")
						}
						this.showL = true
					})
				})
			},
			//刷新地理位置
			refreshBtn() {
				this.showL = false
				this.getAddress((res) => {
					this.getAttendanceState();
				})
			},
			// 打开对话框
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			//  关闭对话框
			dialogClose() {
				console.log('点击关闭')
			},
			// 获取地理位置
			getAddress(callback) {
				console.log('开始定位');
				let _this = this;
				// let l = {
				// 	longitude: "106.504823",
				// 	latitude:"29.577076",
				// 	address: "人工定位"
				// };
				// callback(l);
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res, '成功');
						let l = {
							longitude: res.longitude,
							latitude: res.latitude,
							address: "网页定位",
							// address: res.address.city + res.address.district + res.address.poiName
						};
						callback(l)
					},
					complete: function(err) {
						console.log(err, '失败')
					},
					fail: function(res) {
						// todo 默认了全部可以
						_this.showL = true
						clearInterval(setU)
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						});
						// let l = {
						// 	longitude: "106.504823",
						// 	latitude:"29.577076",
						// 	address: "人工定位"
						// };
						// callback(l)
					}
				});
			},
			// 确认上报考勤
			dialogConfirm(val) {
				this.getAddress((res) => {
					this.$api.postReport({
						...res
					}, true, (e) => {
						console.log(res, 282)
						console.log(e, 289)
						uni.showToast({
							title: "上报成功",
							icon: "success"
						})
					})
				})
			},
			//打卡
			punchClock() {
				this.getAddress((res) => {
					console.log(res,307)
					this.$api.postPunchClock({
						...res
					}, true, (res) => {
						console.log(res,310)
						uni.showToast({
							title: "打卡成功",
							icon: "success"
						})
						this.getAttendanceState()
						this.getAttendance()
						this.getAttGroup()
					})
				})
			},
			//定时任务获取打卡状态
			timingUpdate() {
				// setU = setInterval(()=>{
				this.getAttendanceState()
				// },5000)
			},
			//补卡申请
			toSupplement() {
				uni.navigateTo({
					url: "/pages/submit/supplement?id=0&name=补卡申请"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.indexC {
			width: 92%;
			transition: all .3s;
			padding: 0 4%;
			padding-top: 30rpx;

			.msg-info {
				padding: 30rpx 4%;
				width: 92%;
				padding-top: 30rpx;
				color: #454545;
				background: #FFFFFF;
				border-radius: 15rpx;

				.msg-name {
					font-weight: bold;

					text {
						display: inline-block;
						vertical-align: bottom;
						margin-right: 20rpx;
					}
				}

				.msg-group {
					color: #008AFF;
					margin-top: 10rpx;
				}

				.msg-btn {
					color: #FFFFFF;
					background: #008AFF;
					padding: 11rpx 40rpx;
					border-radius: 30rpx;
					border: 1rpx solid #008AFF;
					margin-top: -20rpx;
				}
			}

			.index-state {
				background: #FFFFFF;
				border-radius: 15rpx;
				padding: 30rpx 4%;
				width: 92%;
				margin-top: 30rpx;
				color: #008AFF;

				image {
					width: 36rpx;
					margin-right: 18rpx;
				}
			}

			.index-cc {
				color: #787878;
				background: #FFFFFF;
				border-radius: 15rpx;
				padding: 30rpx 4%;
				width: 92%;
				margin-top: 30rpx;

				.index-tips {
					width: 100%;

					.tips-item {
						width: 41.2%;
						padding: 30rpx 20rpx;
						background: #F0F0F0;
						border-radius: 7rpx;

						.tips-text {
							margin-top: 15rpx;
							font-weight: bold;
							color: #454545;
						}

						.tips-time {
							.tips-tar {
								padding: 2rpx 6rpx;
								background: #E01915;
								border-radius: 7rpx;
								color: #fff;
								margin-left: 10rpx;
							}
						}

						.tips-btn {
							padding: 8rpx 33rpx;
							color: #008AFF;
							background: #FFFFFF;
							border: 1rpx solid #008AFF;
							border-radius: 24rpx;
							margin-top: 15rpx;
							display: inline-block;
						}
					}
				}

				.index-clock {
					margin: 130rpx auto 80rpx auto;
					width: 265rpx;
					height: 265rpx;
					background: url(../../static/img/index_pic1.png) no-repeat;
					background-size: 100%;
					color: #FFFFFF;

					.clock-time {
						margin-top: 10rpx;
						text-align: center;
					}
				}

				.index-clock-other {
					background: url(../../static/img/index_pic2.png) no-repeat;
					background-size: 100%;
				}

				.index-status {
					color: #6B6B6B;

					image {
						width: 32rpx;
						margin-right: 12rpx;
					}
				}

				.index-refresh {
					margin-top: 25rpx;
					padding: 10rpx 0;
					color: #008AFF;
					text-align: center;
				}
			}
		}
	}
</style>
